<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>填写订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/fill_order.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/touch-0.2.14.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/fill_order.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var list = [{'id':2,'name':'北京大学'},{'id':2,'name':'河南体育大学'},{'id':2,'name':'北京邮电大学'},{'id':2,'name':'北京体育大学'}];


			$(function(){
				onclick();
				inputEvent();
				$("#school-name").bind("keyup",function(){
					txtchange();
				});

			});

			//keyup事件
			function txtchange() {
				var textObj = $("#school-name").val();
				var divObj = $("#school-list-box").html();
				var array = [];

				//ul li
				var li = '';
				for (i in list) {

					var tmp = list[i].name;
					if (tmp.indexOf(textObj) != -1) {
						li += '<li data-sid="' + list[i].id + '">' + tmp + '</li>';

					}
				}

				$('#school-list').html(li);
			}
//
			//span单击事件
			function onclick(){
				$("#school-list").on('click','li',function(){


					var oli = $(this);
					var otxt = $(this).html();
					$("#school-name").empty().val(otxt);

					oli.parent().html("");
				});

			}


			function inputEvent() {
				var $el = $("#school-name, #contact-name, #phonenum, #goods-address");
				$('#school-name').focus(function(){
					$(this).html("");
					$(this).attr('placeholder', '');
				})
				$el.focus(function () {
					$("#footer").css('position', 'relative');
				});

				$el.blur(function () {
					$("#footer").css('position', 'fixed');
				})
			}
		</script>


	</head>
	<body>
		<header>
			<i class="icon iconfont" id="back">&#xe606;</i>
			<span>填写订单</span>
		</header>	
		
		<section class="container panel">
			<img src="img/blackcard.png"/>
			<div class="content">
				<p id="card_number">
					卡号: <span id=number>00001234</span>
				</p>
				<p id="card_type">
					类型: <span id="type">选号黑卡</span>
				</p>
				<p id="card_cost">
					售价: <span id="cost"> ￥49</span>
				</p>
			</div>	
		</section>
		
		<section class="user-detail panel" id="user-detail">
			<ul>
				<li class="school" id="school-placeholder"><span class="left-desc">所在学校</span><span class="right-desc">
					<input type="text" name="contact-name" value="" placeholder="北京大学" id="school-name"/></span>

					<div id="school-list-box">
						<ul id="school-list" class="school-list" >
						</ul>
					</div>
					<!--<div>-->
						<!--<ul class="school-list" id="school-list">-->
							<!--&lt;!&ndash;<li>北京邮电大学</li>&ndash;&gt;-->
							<!--&lt;!&ndash;<li>北京邮电大学</li>&ndash;&gt;-->
							<!--&lt;!&ndash;<li>北京邮电大学</li>&ndash;&gt;-->
							<!--&lt;!&ndash;<li>北京邮电大学</li>&ndash;&gt;-->
						<!--</ul>-->
					<!--</div>-->


				</li>
				<li><span class="left-desc">联系人姓名</span><span class="right-desc"><input type="text" name="contact-name" value="" id="contact-name"/></span></li>

				<li><span class="left-desc">手机号</span><span class="right-desc phone"><input type="text" name="contact-name" value="" id="phonenum"/></span></li>
				<li class="error" id="phone-error"><span>您输入的号码有误</span></li>
				<li id="goods-address-placeholder">
					<span class="left-desc">收货地址</span><span class="right-desc" ><input type="text" name="contact-name" id="goods-address" value="" /></span>
					<!--<textarea id="goods-address"></textarea>-->
				</li>

			</ul>
		</section>

		<section class="pay-wrapper panel">
			<ul>
				<li><span class="left-desc">支付方式</span></li>
				<li><img src="./img/wx.png" />微信支付<span class="right-desc"><img src="./img/wx-pay-checked.png"></span></li>
			</ul>
		</section>		
		<footer class="panel" id="footer">
			<p><span class="left-desc">合计：100元</span><a href="#" class="submit-order">提交订单</a></p>
		</footer>
	</body>
</html>
